<template>
    <div class="table">
    <vxe-toolbar>
        </vxe-toolbar>
  
        <vxe-table
          border
          resizable
          show-overflow
          ref="xTable"
          max-height="400"
          header-align="center"
          header-row-class-name="tableHeader"
          :edit-config="{ trigger: 'click', mode: 'row', showIcon: false }"
          header-cell-class-name="tableHeader"
          cell-class-name="tableBody"
          :data="tableData"
          @edit-actived="editActivedEvent">
          <vxe-column field="email" title="指导老师邮箱" :edit-render="{}">
            <template #default="{ row }">
              <span>{{ row.email }}</span>
            </template>
            <template #edit="{ row }">
              {{row.email}}
            </template>
          </vxe-column>
          <vxe-column title="姓名" :edit-render="{}" >
            <template #default="{ row }">
              <span>{{row.name}}</span>
            </template>
            <template #edit="{ row }">
              {{row.name}}
            </template>
          </vxe-column>
          <vxe-column title="研究方向" :edit-render="{}">
            <template #default="{ row }">
              <span>{{row.guildence}}</span>
            </template>
            <template #edit="{ row }">
              {{row.guildence}}
            </template>
          </vxe-column>
          <vxe-column title="备注" :edit-render="{}">
            <template #default="{ row }">
              <span>{{row.introduction}}</span>
            </template>
            <template #edit="{ row }">
                {{row.introduction}}
            </template>
          </vxe-column>
        </vxe-table>
        </div>
  </template>
  <script>
  
  export default {
          data () {
            return {
              tableData: [
              ],
            }
          },
          mounted () {
            this.tableData = this.$props.tableList

          },
          methods: {
          },
          props: {
            tableList: {
              type: Array||Object||String,
            }
          },
          watch:{
            tableList:{
              handler: function(newVal){
                this.tableData = newVal
              },
              deep: true
            }
          },
        }
  </script>
  <style>
  .table{
    width: 100%
  }
 .tableHeader{
    background-color: rgb(225, 225, 225);
    border: solid 1px #707070;
  }
  .tableBody{
    background-color: #fafafa;
    border: solid 1px #707070;
  }
  </style>